<template>
	<view v-if="template">
		<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :navbarStyle="template.style?.navbar"
			onShareAppMessage>
			<!-- 		<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
				<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
			</s-block> -->
			<!-- 广告模块 -->
			<!-- <s-popup-image /> -->
			<view class="f1">
				<view class="search-content ss-flex ss-col-center ss-row-between"
					@click="sheep.$router.go('/pages/goods/list')">
					<view class="uni-searchbar ss-flex-1">
						<view data-v-f07ef577="" class="uni-searchbar__box"
							style="border-radius: 0px; background-color: rgb(248, 248, 248);">
							<view class="uni-searchbar__box-icon-search">
								<uni-icons type="search" size="30"
									style="font-size: 22px;padding: 8rpx; color: #FFE49D;"></uni-icons>
							</view>
							<uni-text class="uni-searchbar__text-placeholder"><span>搜索您想查找的产品</span></uni-text>
						</view>
					</view>
					<view data-v-1f3fe5bf="" class="keyword-link ss-flex"></view>
				</view>
				<view class="home-tab">
					<view class="home-tab-item" @click="sheep.$router.go('/pages/media/index')">
						<img src="/static/hometab1.png" />
						视频宣传
					</view>
					<view class="home-tab-item" @click="sheep.$router.go('/pages/goods/list?categoryId=191')">
						<img src="/static/hometab2.png" />
						新品推荐
					</view>
					<view class="home-tab-item" @click="sheep.$router.go('/pages/public/richtext?id=5')">
						<img src="/static/hometab3.png" />
						关于我们
					</view>
					<view class="home-tab-item" @click="sheep.$router.go('/pages/index/contact_us')">
						<img src="/static/hometab4.png" />
						联系我们
					</view>
				</view>
				<img src="/static/home_bg1.png" style="width: 100%;vertical-align: middle;" />
			</view>
			<!-- https://dissa.oss-cn-hangzhou.aliyuncs.com/uploads/20231219/7f9cc36d3536a2d22752d5242cbf53eb.mp4 -->
			<view class="f1">
				<su-video
					poster="https://yanhuaupload.oss-cn-hangzhou.aliyuncs.com/uploads/20240108/e7347832f98811fa66e3981616d5c0d7.png"
					src="https://dissa.oss-cn-hangzhou.aliyuncs.com/uploads/20231219/7f9cc36d3536a2d22752d5242cbf53eb.mp4"></su-video>
				<img src="/static/home_bg2.png" style="width: 100%; vertical-align: middle;" />
			</view>
		</s-layout>
		<view v-if="showFisrt" class="fisrt" @click="showFisrt = false">
			<img src="/static/first.gif" />
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	const showFisrt = ref(true)
	// 隐藏原生tabBar
	uni.hideTabBar();

	const template = computed(() => sheep.$store('app').template?.home);

	onLoad((options) => {
		// #ifdef MP
		// 小程序识别二维码
		if (options.scene) {
			const sceneParams = decodeURIComponent(options.scene).split('=');
			options[sceneParams[0]] = sceneParams[1];
		}
		// #endif

		// 预览模板
		if (options.templateId) {
			sheep.$store('app').init(options.templateId);
		}

		// 解析分享信息
		if (options.spm) {
			$share.decryptSpm(options.spm);
		}

		// 进入指定页面(完整页面路径)
		if (options.page) {
			sheep.$router.go(decodeURIComponent(options.page));
		}
	});

	// 下拉刷新
	onPullDownRefresh(() => {
		sheep.$store('app').init();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});
</script>

<style lang="scss">
	.search-content {
		position: absolute;
		top: 130rpx;
		width: 90%;
		margin: auto;
		height: 72rpx;
		left: 0;
		right: 0;
		background-color: #642023;
		border-radius: 40rpx;
	}

	.uni-searchbar__box {
		display: flex;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		flex: 1;
		flex-direction: row;
		align-items: center;
		height: 36px;
		padding: 5px 8px 5px 0px;
	}

	.f1 {
		position: relative;

		.ui-video-wrap {
			position: absolute;
			top: 124rpx;
			width: 631rpx;
			height: 352rpx;
			z-index: 2;
			left: 0;
			right: 0;
			margin: auto;
		}
	}

	.home-tab {
		width: 80%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		top: 1040rpx;

		.home-tab-item {
			text-align: center;
			font-size: 12px;
			color: #F9F0CC;
		}

		img {
			width: 110rpx;
			display: block;
			margin-bottom: 20rpx;
		}
	}

	.fisrt {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: #aa161b;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.fisrt img {
		width: 100%;
	}
</style>